<template>
  <div class="maintenanceHistory">
    <el-row>
      <dynForm :info-form="searchForm" :search-tags="searchTags" :select-list="selectList">
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="doSearch"
        >
          {{ $t("search") }}</el-button
          >
    </dynform></el-row>
    <!-- 表单部分 -->
    <el-card>
      <el-row>
        <dynTable
          ref="dynTable"
          :loading="tableLoading"
          :table-data="tableData"
          :table-columns="tableColumns"
          :handle-selection-change="handleSelectionChange"
          :row-click="rowClick"
        />
      </el-row>
      <!--分页组件-->
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script>
import mySetting from '@/mixins/mySetting'
import pmsHistoryApi from '@/api/maintenance/history'
import eqpbaseApi from '@/api/equipment/eqpbase'
import { getPMFormList } from '@/api/eForm/eFormCheck'
export default {
  name: 'MaintenanceHistory',
  mixins: [mySetting],
  props: {},
  data() {
    return {
      searchForm: {},
      searchTags: [
        { label: this.$t('MaintenanceOrderNumber'), prop: 'formNo', tag: 'DynInput' },
        { label: this.$t('eqpName'), prop: 'EqpName', tag: 'DynSelect' },
        { label: this.$t('FormName'), prop: 'formId', tag: 'DynSelect' },
        { label: this.$t('timeInterval'), prop: '', tag: 'Dyndaterange', event: (value) => {
          this.searchForm.startTime = Array.isArray(value) ? value[0] : null
          this.searchForm.endTime = Array.isArray(value) ? value[1] : null
        } }
      ],
      selectList: {},
      tableColumns: [
        { prop: '', label: '', type: 'selection' },
        { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
          return (
            <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
          )
        } },
        { prop: 'formNo', label: this.$t('MaintenanceOrderNumber'), width: '200px' },
        { prop: 'pmScheduleName', label: this.$t('MaintenancePlanName'), width: '200px' },
        { prop: 'formName', label: this.$t('FormName'), width: '200px' },
        { prop: 'eqpId', label: this.$t('eqpName') },
        { prop: 'status', label: this.$t('formStatus'), templete: (_scope) => {
          return (
            <el-tag type={this.formStatus(_scope.row.status) } effect='dark'
            >{ this.formText(_scope.row.status) }</el-tag>
          )
        } },
        { prop: 'result', label: this.$t('EnumCheckItemFinalResult_Result'), templete: (_scope) => {
          return (
            <el-tag type={this.resultStatus(_scope.row.result) } effect='dark'
            >{ this.resultText(_scope.row.result) }</el-tag>
          )
        } },
        { prop: 'creator', label: this.$t('creator') },
        { prop: 'createTime', label: this.$t('createTime'), width: '160px' },
        { prop: '', label: this.$t('modify'), templete: (_scope) => {
          return (
            <el-link type='primary' underline={false}>
              {_scope.row.result ? '' : '修改'}
            </el-link>
          )
        } }
        // { prop: '', label: '查看详情', fixed: 'right', templete: (_scope) => {
        //   return (
        //     <el-link type='primary' underline={false}>查看详情</el-link>
        //   )
        // } }
      ],
      tableLoading: true
    }
  },
  computed: {},
  watch: {},
  created() {
    Promise.race([this.initList(),
      this.getEqpNameList(),
      this.getFormList()])
  },
  methods: {
    async initList() {
      const res = await pmsHistoryApi.getList(this.$clearNull({ ...this.searchForm, ...this.listQuery }))
      this.tableData = res.data
      this.total = res.total
      this.tableLoading = false
    },
    doSearch() {
      this.listQuery.page = 1
      this.initList()
    },
    getList(val) {
      this.listQuery = val
      this.initList()
    },
    handleSelectionChange(row) {
      this.multipleSelection = row
    },
    rowClick(row) {
      this.$refs.dynTable.$refs.multipleTable.toggleRowSelection(row)
    },
    // 获取设备名称
    async getEqpNameList() {
      const res = await eqpbaseApi.getHandleList()
      this.$set(this.selectList, 'EqpName', res.data)
    },
    // 检查表单
    async getFormList() {
      const res = await getPMFormList()
      this.$set(this.selectList, 'formId', res.data)
    },
    formStatus(val) {
      const statusMap = {
        1: 'danger',
        2: 'info',
        3: 'success'
      }
      return statusMap[val]
    },
    formText(val) {
      const statusMap = {
        1: '未完成',
        2: '正在进行',
        3: '已完成'
      }
      return statusMap[val]
    },
    resultStatus(val) {
      const statusMap = {
        1: 'success',
        0: 'info'
      }
      return statusMap[val]
    },
    resultText(val) {
      const statusMap = {
        1: '成功',
        0: '暂无'
      }
      return statusMap[val]
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/styles/defaultStyle.scss";
.maintenanceHistory .el-row:nth-child(1) {
  padding-bottom: 0;
}
::v-deep .el-form {
  // .el-form-item{
  //   margin-bottom: 15px;
  // }
}
.el-link{
  display: inline-block;
  padding: 0 5px;
}
</style>
